<template>
	<view class="addgoods-info-page">
		<!-- 导航栏 -->
		<free-nav-bar textContent="添加商品" isBackShow></free-nav-bar>
		<view class="addgoods-wrapper">
			<view class="input-wrapper">
				<view class="label main-text-color flex">
					<span class="name">标题<em class="star">*</em></span>
					<span class="val">
						0<em class="fix">/20</em>
					</span>
				</view>
				<input class="input main-text-color" type="text" placeholder="请输入商品标题">
			</view>
			<view class="input-wrapper">
				<view class="label main-text-color flex">
					<span class="name">简述<em class="star">*</em></span>
					<span class="val">
						0<em class="fix">/64</em>
					</span>
				</view>
				<input class="input main-text-color" type="text" placeholder="请输入简短描述">
			</view>
			<view class="input-wrapper input-two">
				<view class="input-select flex">
					<view class="label main-text-color">果类<em class="star">*</em></view>
					<view class="flex select__wrapper" @click="handleFruits()">
						<view class="select__content main-text-color">请选择</view>
						<view class="select"><i class="sprite sprite-arrow-r"></i></view>
					</view>
				</view>
				<view class="input-info">
					<span class="name font28">主图<em class="star">*</em></span>
					<view class="upload flex">
						<i class="sprite sprite-upload"></i>
					</view>
				</view>
			</view>
			<view class="input-wrapper" style="padding: 0;">
				<view class="input-wrapper__item flex">
					<view class="label">规格<em class="star">*</em></view>
					<view class="select__content main-text-color">请选择</view>
					<view class="select"><i class="sprite sprite-arrow-r"></i></view>
				</view>
				<view class="input-wrapper__item flex">
					<view class="label">快递费<em class="star">*</em></view>
					<view class="select__content main-text-color">请选择</view>
					<view class="select"><i class="sprite sprite-arrow-r"></i></view>
				</view>
			</view>
			<view class="input-wrapper">
				<view class="label main-text-color flex">
					<span class="name">商品详情</span>
					<span class="val">
						0<em class="fix">/500</em>
					</span>
				</view>
				<textarea class="textarea main-text-color" type="text" placeholder="请输入商品描述以提升转化"></textarea>
				<view class="upload flex">
					<i class="sprite sprite-upload"></i>
				</view>
			</view>
		</view>
		<hqs-popup title="种植果类" v-model="showPopup">
		    <view>弹窗内容</view>
		</hqs-popup>
		<view class="input-wrapper btns flex">
			<view class="btn warehousing">入仓</view>
			<view class="btn main-bg-color">上架</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				showPopup: false,
				params: {
					name: '',
					type: null,
					address: '',
					mode: '',
					desc: '',
					full_name: '',
					phone: '',
					business_license: '',
					status: 0
				}
			}
		},
		created() {
			
		},
		methods: {
			handleFruits() {
				this.showPopup = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addgoods-info-page {
		padding-bottom: 130rpx;
		.input-wrapper {
			position: relative;
			padding: 24rpx 30rpx;
			background: #fff;
			margin-bottom: 16rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&.input-two {
				padding: 0;
			}
			.label {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				width: 100%;
				justify-content: space-between;
				margin-bottom: 24rpx;
				
				.star {
					color: #FD5052;
				}
				.fix {
					color: #BFBFBF;
				}
			}
			.input {
				display: block;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
			.input-select {
				height: 88rpx;
				line-height: 88rpx;
				padding: 0 30rpx;
				align-items: center;
				border-bottom: 1px solid #ebebeb;
				
				.label {
					margin: 0;
				}
				.select__content {
					white-space: nowrap;
				}
			}
			.input-info {
				padding: 24rpx 30rpx;
				
				.name {
					display: block;
					height: 40rpx;
					line-height: 40rpx;
					margin-bottom: 24rpx;
					
					.star {
						color: #FD5052;
					}
				}
			}
			.input-wrapper__item {
				position: relative;
				height: 88rpx;
				line-height: 88rpx;
				border-bottom: 1px solid #ebebeb;
				padding: 0 30rpx;
				align-items: center;
				
				&:last-child {
					border-bottom: none;
				}
				.label {margin: 0;}
			}
			.select__wrapper {
				flex: 1;
			}
			.select__content {
				flex: 1;
				font-size: 28rpx;
				padding-right: 60rpx;
				white-space: nowrap;
			}
			.select {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				width: auto;
				padding-left: 16rpx;
				padding-right: 30rpx;
				height: 88rpx;
			}
			
			
			.upload {
				width: 176rpx;
				height: 128rpx;
				background: #F1F1F1;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				
				i {
					display: block;
				}
			}
			.textarea {
				height: 160rpx;
				font-size: 28rpx;
			}
		}
		.btns {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 90rpx;
			padding: 8rpx 30rpx;
			align-items: center;
			justify-content: center;
			border: none;
			width: 100%;
			margin: 0;
			
			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				border-radius: 200px;
				font-size: 28rpx;
				color: #fff;
				cursor: pointer;
				text-align: center;
			}
			.warehousing {
				background: #FCBC23;
				margin-right: 20rpx;
			}
		}
	}
</style>
